<template>
	<div class="wrapper ex-realname">
		<head-title :title="headText" @callback="onClickLeft"></head-title>
		<div class="srarchbox wrapbd">
			<div class="ex-search-input">
				<i class="fa fa-search fa-lg" aria-hidden="true"></i>
				<input type="search" v-model.trim="search" placeholder="搜索关键字">
				<span @click='searchBtn'>搜索</span>
			</div>
            <div class="searchall">
            	<!-- <h3>大家都在搜索</h3>
            	<ul>
            		<li v-for="(item,index) in searchlist" :key="index" @click="searchBtn(item,1)">{{item}}</li>
            	</ul> -->
            </div>
			<div class="i-home">
				<div class="shoplist shopall">
					<ul>
						<li @click="inShopdetails(item)" v-for="item in shopList" :key="item.product_no">
                            <span><img :src="item.cover_img"></span>
                            <p>{{item.product_name}}<br><i>￥{{item.unit_point}}</i></p>
						</li>
					</ul>
				</div>
			</div>
		</div>
	</div>
</template>
<script>
	import HeadTitle from "./../../components/title.vue"
	export default {
		data(){
			return {
				headText: '搜索',  //顶部标题
				search:'',
				searchlist:{0:'猪肉',1:'生鲜',2:'水产'},
				shopList:{},
			}
		},
		methods:{
			//左上角返回键
			onClickLeft () { this.$router.go(-1);},
			//搜索商品
			searchBtn(item,id){
				var _this = this;
				if(id == 1){this.search = ""}
				this.Tools.AXIOS({
                    url: 'product/list',
                    transformRequest: {
                        product_name: this.search || item,
                    },
                    success: function (res) {
                       let result = res.data.data;
					   _this.search = "";
                       if(result.list.length == 0){
						    _this.$toast({message: '未找到该商品', position: 'middle'})
                       		_this.shopList = ""
                       }else{
                       		_this.shopList = result.list
                       }
                    }
                })
            },
			//跳转到商品详情
            inShopdetails(item){
            	this.$router.push({path:'mallDetails',query: {spec_id:item.spec_id}});
            },

		},
		components: {
			HeadTitle
		},
	}
</script>
<style scoped>
	.srarchbox{ width: 100%;}
	.mint-search{ height: auto; }.ex-realname{ background: #fff; overflow: hidden;}
	.searchall{ padding: 0 .3rem;}
	.searchall h3{ color: #7c7c7c; font-size: .35rem; font-weight: normal; padding: .3rem 0; border-bottom: 1px solid #DBDBDB;}
    .srarchbox .i-home .shoplist ul{ overflow: hidden; }
    .srarchbox .i-home .shoplist ul li{ width: 50%; padding-bottom: .3rem; background: #fff; height: 5rem; border: 1px solid #F3F3F3; border-bottom: none; box-sizing: border-box; float: left; display: block;}
	.srarchbox .i-home .shoplist ul li span{ width: 100%; height: 3.5rem; overflow: hidden; display: block;}
	.srarchbox .i-home .shoplist ul li span a{ display: block;}
    .srarchbox .i-home .shoplist ul li:nth-of-type(2n){ border-left: none;}
    .srarchbox .i-home .shoplist ul li:nth-last-of-type(1),.i-home .shoplist ul li:nth-last-of-type(2){border-bottom:1px solid #F3F3F3;}
    .srarchbox .i-home .indexshoplist ul li:nth-last-of-type(1),.i-home .indexshoplist ul li:nth-last-of-type(2),.i-home .indexshoplist ul li{ border-bottom: none; }
    .srarchbox .i-home .shoplist ul li span img{ width: 100%;}
    .srarchbox .i-home .shoplist ul li p{ padding: 0 .1rem; font-size: .35rem; display: block; color: #323232; border: 0; text-align: left;}
    .srarchbox .i-home .shoplist ul li p i{ font-size: .35rem; color: #B08332; font-style: normal; }
	.searchall ul{ overflow: hidden; padding-top: .4rem;}
	.searchall ul li{ font-size: .35rem; float: left; margin: 0 .3rem .3rem 0; color: #7c7c7c; }
	.srarchbox .i-home .shopall{ margin-top: .3rem!important; }
	.ex-search-input { width: 100%;  height: 1rem; position: relative; margin-top: 1.5rem;}
	.ex-search-input i{ float: left;  position: absolute; left: 6%; top: .3rem; color: #999;}
	.ex-search-input input { margin-left: .3rem; text-indent: .7rem; border:none; background-color: #eee; border-radius: 3px;  font-size: .35rem; width: 80%; padding: .25rem 9% .25rem 2%;}
	.ex-search-input span { color: #047dcb; font-size: .35rem; padding-left: .5rem;}

</style>
